import Vue from 'vue'
import './index.less'

import { loadingTemplate, errorTemplate } from './template'

const vm = Vue.prototype.$bus = new Vue()

const $loading = document.createElement('div')

// 页面加载的超时时间
const errotTimeout = 10000
let errorTimer = null

const init = () => {
  $loading.innerHTML = ''
  $loading.className = 'loading-indicator'
  $loading.appendChild(loadingTemplate.$el)
  document.body.appendChild($loading)
  vm.$bus.$on('ready', ready)
  vm.$bus.$on('error', error)
  errorTimer = setTimeout(() => {
    error()
  }, errotTimeout)
}

const ready = () => {
  // 这里判断errotTimer计时器，是为了避免已经error的后面再接收到ready事件
  if (errorTimer) {
    clearTimeout(errorTimer)
    errorTimer = null
    $loading.parentNode && $loading.parentNode.removeChild($loading)
  }
}

const error = () => {
  // 这里判断errotTimer计时器，是为了避免已经error的后面再接收到ready事件
  if (errorTimer) {
    clearTimeout(errorTimer)
    errorTimer = null
    $loading.innerHTML = ''
    $loading.appendChild(errorTemplate.$el)
  }
}

const clearTemplate = () => {
  $loading.parentNode && $loading.parentNode.removeChild($loading)
}

export default {
  install(Vue) {
    Vue.mixin(({
      beforeRouteEnter(to, from, next) {
        // 进入页面时先清除之前之前的loading，再根据meta去判断是否需要loading
        clearTemplate()
        if (to.meta.needLoading) {
          init()
        }
        next()
      }
    }))
  }
}
